{% extends 'base.html' %}
{% block title %}
    博客首页
{% endblock %}
{% block styles %}
    {{ super() }}
    <style>
        #container {
            width: 900px;
            margin: 0 auto;
        }

        .article {
            width: 800px;
            background-color: aliceblue;
            height: 200px;
            margin-bottom: 20px;
            border-bottom: 1px solid gray;
        }
    </style>
{% endblock %}
{% block newcontent %}
    <nav aria-label="Page navigation" class="col-md-offset-5">
        <ul class="pagination">
            {% if not pagination.has_prev %}
                <li class="disabled"><span href="#" aria-label="Previous">&laquo;</span></li>
            {% else %}
                <li><a href="{{ url_for('user.index') }}?page={{ pagination.prev_num }}" aria-label="Previous"><span
                        aria-hidden="true">&laquo;</span></a></li>
            {% endif %}
            {% for page_num in range(1,pagination.pages + 1) %}
                <li {% if pagination.page==page_num %} class="active" {% endif %}><a
                        href="{{ url_for('user.index') }}?page={{ page_num }}">{{ page_num }}</a></li>
            {% endfor %}
            {% if not pagination.has_next %}
                <li class="disabled"><span href="#" aria-label="Next" aria-hidden="true">&raquo;</span></li>
            {% else %}
                <li><a
                        href="{{ url_for('user.index') }}?page={{ pagination.next_num }}" aria-label="Next"><span
                        aria-hidden="true">&raquo;</span></a>
                </li>
            {% endif %}
        </ul>
    </nav>
    <div id="container">
        {% for article in pagination.items %}
            <div class="article">
                <p><a href="{{ url_for('article.article_detail') }}?aid={{ article.id }}">{{ article.title }}</a></p>
                <p>{{ article.user.username }}</p>
                <p>{{ article.article_type.type }}</p>
                <p>{{ article.content | decode | safe }}</p>
                <p>{{ article.pdatetime }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock %}